import { PageContainer } from '@ant-design/pro-layout';
import TbaleExplainMap from '@/components/TipsMap';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown, ProCard } from '@ant-design/pro-components';
import {
  Button,
  Dropdown,
  Menu,
  Space,
  Tag,
  message,
  Descriptions,
  Steps,
  Modal,
  Divider,
} from 'antd';
import React, { useRef, useState } from 'react';
import request from 'umi-request';
import { Link, history } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';

const { Step } = Steps;

const dataSource = [
  {
    事务编号: '1',
    事务名称: '事务名称1',
    抄送人: '抄送人1',
    事务创建时间: '2022-04-05',
    处理状态: '已读',
    事务状态: '审核中',
  },
  {
    事务编号: '1',
    事务名称: '事务名称2',
    抄送人: '抄送人2',
    事务创建时间: '2022-04-06',
    处理状态: '未读',
    事务状态: '通过',
  },
];
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const actionRef = useRef<ActionType>();
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const columns = [
    {
      title: '事务编号',
      dataIndex: '事务编号',
      // valueType: 'indexBorder',
      // width: 60,
    },
    {
      title: '事务名称',
      key: '事务名称',
      dataIndex: '事务名称',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '抄送人',
      key: '抄送人',
      dataIndex: '抄送人',
      // copyable: true,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '事务创建时间',
      key: '事务创建时间',
      dataIndex: '事务创建时间',
      sorter: {
        compare: (a: { 事务创建时间: string }, b: { 事务创建时间: string }) =>
          b.事务创建时间.localeCompare(a.事务创建时间),
      },
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '处理状态',
      key: '处理状态',
      dataIndex: '处理状态',
      filters: true,
      onFilter: true,
      ellipsis: true,
      hideInSearch: true,
      valueType: 'select',
      valueEnum: {
        未读: {
          text: '未读',
          status: 'Error',
        },
        已读: {
          text: '已读',
          status: 'Success',
        },
      },
    },
    {
      title: '事务状态',
      key: '事务状态',
      dataIndex: '事务状态',
      ellipsis: true,
      hideInSearch: true,
      render: (text: any) => <Tag>{text}</Tag>,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: () => <a onClick={showModal}>查看</a>,
    },
  ];

  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        dataSource={dataSource}
        rowKey="事务名称"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
          // onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="抄送列表"
      />
      <Modal
        title="查看流程"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="1200px"
        footer={[
          <Button key="cancel" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="refuse" type="primary" onClick={() => {}}>
            拒绝
          </Button>,
          <Button key="agree" type="primary" onClick={() => {}}>
            同意
          </Button>,
        ]}
      >
        <Descriptions bordered size="small">
          <Descriptions.Item label="学号">202032803124</Descriptions.Item>
          <Descriptions.Item label="姓名">李靖涵</Descriptions.Item>
          <Descriptions.Item label="班级">电子信息2859</Descriptions.Item>
          <Descriptions.Item label="请假时间">
            2022-04-24 至 2022-05-24{' '}
          </Descriptions.Item>
        </Descriptions>
        <Divider />
        <Steps current={1}>
          <Step
            title="发起人"
            subTitle="李靖涵"
            description={<span>时间：2022-05-31</span>}
          />
          <Step
            title="审批人"
            subTitle="李老师"
            description={
              <>
                时间：2022-05-31<br></br> <a>下载附件</a>
              </>
            }
          />
          <Step
            title="审批人"
            subTitle="李老师"
            description={
              <>
                时间：2022-05-31<br></br> <a>下载附件</a>
              </>
            }
          />
          <Step
            title="审批人"
            subTitle="李老师"
            description={
              <>
                时间：2022-05-31<br></br> <a>下载附件</a>
              </>
            }
          />
          <Step
            title="抄送人"
            subTitle="李老师"
            description={
              <>
                时间：2022-05-31<br></br> <a>下载附件</a>
              </>
            }
          />
        </Steps>
      </Modal>
    </>
  );
};
